<template>
    <div class="tanBar">
        <div class="item">
            首页
        </div>
        <div class="item">
            朋友
        </div>
        <div class="item">
            <div class="icon">
                <image src="/static/index/add.png" mode="widthFix" class="img"></image>
            </div>
        </div>
        <div class="item">
            消息
            <div class="num"><span class='text'>{{count}}</span></div>
        </div>
        <div class="item actived">
            我
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            count: {
                type: Number | String,
                default: 10
            }
        }
    }
</script>

<style lang="scss" scoped>
    .tanBar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 60px;
        box-shadow: 0px 6px 12px 1px rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        background-color: #fff;
        max-width: 375px;
        min-width: 320px;
        margin: auto;

        .item {
            width: 20%;
            color: #777;
            position: relative;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;

            .icon {
                width: 40px;
            }

            .num {
                position: absolute;
                top: -7px;
                right: 7px;
                font-size: 12px;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background-color: #ee576e;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;

                .text {
                    display: block;
                    transform: scale(.8);
                }
            }

            &.actived {
                color: #333;
            }
        }
    }
</style>